

<template>
  <div class="node-list-popup">
    <div class="node-list-popup-content">
      <div class="node-list">
        <div class="node-type">大模型能力</div>
        <div class="node-flex-box">
          <div class="node-item" @click="handleAddNode('llm-node')">
            <img src="@/assets/svg/llm-node.svg" alt="" />
            <div class="node-name">AI对话</div>
          </div>
          <div class="node-item" @click="handleAddNode('classifier-node')">
            <img src="@/assets/svg/question-node.svg" alt="" />
            <div class="node-name">问题分类</div>
          </div>
        </div>
      </div>
      <div class="node-list">
        <div class="node-type">知识检索</div>
        <div class="node-flex-box">
          <div class="node-item" @click="handleAddNode('knowledge-base-node')">
            <img src="@/assets/svg/knowledge-node.svg" alt="" />
            <div class="node-name">检索知识库</div>
          </div>
        </div>
      </div>
      <div class="node-list">
        <div class="node-type">数据库</div>
        <div class="node-flex-box">
          <div class="node-item" @click="handleAddNode('dbquery-node')">
            <img src="@/assets/svg/knowledge-node.svg" alt="" />
            <div class="node-name">数据查询</div>
          </div>
        </div>
      </div>
      <div class="node-list">
        <div class="node-type">外部调用</div>
        <div class="node-flex-box">
          <div class="node-item" @click="handleAddNode('http-node')">
            <img src="@/assets/svg/http-node.svg" alt="" />
            <div class="node-name">Http请求</div>
          </div>
        </div>
      </div>
      <div class="node-list">
        <div class="node-type">处理逻辑</div>
        <div class="node-flex-box">
          <div class="node-item" @click="handleAddNode('switch-node')">
            <img src="@/assets/svg/judge-node.svg" alt="" />
            <div class="node-name">条件分支</div>
          </div>
          <div class="node-item" @click="handleAddNode('code-node')">
            <img src="@/assets/svg/question-node.svg" alt="" />
            <div class="node-name">脚本执行</div>
          </div>
          <div class="node-item" @click="handleAddNode('enhanceJava-node')">
            <img src="@/assets/svg/question-node.svg" alt="" />
            <div class="node-name">Java增强</div>
          </div>
        </div>
      </div>
      <!-- <div class="node-list">
        <div class="node-type">变量赋值</div>
        <div class="node-flex-box">
          <div class="node-item" @click="handleAddNode('variable-assignment-node')">
            <img src="@/assets/svg/variable-assignment-node.svg" alt="" />
            <div class="node-name">变量赋值</div>
          </div>
        </div>
      </div> -->
      <div class="node-list">
        <div class="node-type">执行动作</div>
        <div class="node-flex-box">
          <div class="node-item" @click="handleAddNode('reply-node')">
            <img src="@/assets/svg/reply-node.svg" alt="" />
            <div class="node-name">直接回复</div>
          </div>
        </div>
      </div>
      <div class="node-list">
        <div class="node-type">结束</div>
        <div class="node-flex-box">
          <div class="node-item" @click="handleAddNode('end-node')">
            <img src="@/assets/svg/end-node.svg" alt="" />
            <div class="node-name">结束流程</div>
          </div>
        </div>
      </div>
      <!-- <div class="node-list">
        <div class="node-type">其他</div>
        <div class="node-flex-box">
          <div class="node-item" @click="handleAddNode('explain-node')">
            <img src="@/assets/svg/explain-node.svg" alt="" />
            <div class="node-name">注释卡片</div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>


<script setup>
import { generateUniqueId } from '@/utils/common/index';
const emit = defineEmits(['click-item']);

const data = {
  'llm-node': {
    type: 'llm',
    x: 786,
    y: 265,
    properties: {
      text: 'LLM',
      options: {
        model: {
          modeId: null,
          params: {
            model: '',
            temperature: 0.7
          }
        },
        history: 3,
        messages: [
          {
            role: 'system',
            content: ''
          },
          {
            role: 'user',
            content: ''
          }
        ]
      },
      inputParams: [],
      outputParams: [
        {
          field: 'text',
          name: '回复内容',
          type: 'string'
        }
      ],
      height: 114,
      width: 332
    }
  },
  'knowledge-base-node': {
    type: 'knowledge',
    x: 1272,
    y: 263.5,
    properties: {
      text: '知识库',
      options: {
        knowIds: [],
        topNumber: 5,
        similarity: 0.7
      },
      inputParams: [],
      outputParams: [
        {
          field: 'documents',
          name: '文档列表',
          type: 'object[]'
        },
        {
          field: 'data',
          name: '文档内容',
          type: 'string'
        }
      ],
      height: 136,
      width: 332
    }
  },
  'end-node': {
    type: 'end',
    x: 1272,
    y: 263.5,
    properties: {
      text: '结束',
      options: {
        outputText: false,
        outputContent: ''
      },
      inputParams: [],
      outputParams: [],
      height: 114,
      remarks: '',
      width: 332
    }
  },

  'classifier-node': {
    type: 'classifier',
    x: 1272,
    y: 263.5,
    properties: {
      text: '分类器',
      options: {
        model: {
          modeId: null,
          params: {
            model: '',
            temperature: 0.7
          }
        },
        categories: [
          {
            category: '',
            next: ''
          }
        ],
        else: {
          next: ''
        }
      },
      inputParams: [],
      outputParams: [
        {
          field: 'index',
          name: '分类索引',
          type: 'number'
        },
        {
          field: 'content',
          name: '分类描述',
          type: 'string'
        }
      ],
      remarks: '',
      height: 136,
      width: 332
    }
  },
  'reply-node': {
    type: 'reply',
    x: 1272,
    y: 263.5,
    properties: {
      text: '直接回复',
      options: { content: '' },

      inputParams: [],
      outputParams: [],
      remarks: '',
      height: 136,
      width: 332
    }
  },
  'switch-node': {
    type: 'switch',
    x: 786,
    y: 485,
    properties: {
      text: '条件分支',
      options: {
        if: [
          {
            logic: 'AND',
            conditions: [
              {
                nodeId: '',
                field: '',
                operator: 'EQUALS',
                value: ''
              }
            ],
            next: ''
          }
        ],
        else: {
          next: ''
        }
      },
      inputParams: [],
      outputParams: [
        {
          field: 'index',
          name: '分支索引',
          type: 'number'
        }
      ],
      height: 118,
      width: 332
    }
  },
  'code-node': {
    type: 'code',
    x: 1272,
    y: 263.5,
    properties: {
      text: '脚本执行',
      options: {
        codeType: 'javascript',
        code: "function main(params) {\n  return {\n    result: params.arg1 + '_拼接_' + params.arg2,\n  }\n}"
      },
      inputParams: [
        {
          field: '',
          name: 'arg1',
          nodeId: ''
        },
        {
          field: '',
          name: 'arg2',
          nodeId: ''
        }
      ],
      outputParams: [
        {
          field: 'result',
          name: '返回结果',
          type: 'string'
        }
      ],
      height: 136,
      width: 332
    }
  },
  'enhanceJava-node': {
    type: 'enhanceJava',
    x: 728,
    y: 479,
    properties: {
      text: 'Java 增强',
      options: {
        enhance: {
          type: 'class',
          path: ''
        }
      },
      inputParams: [
        {
          field: '',
          name: 'arg1',
          nodeId: ''
        },
        {
          field: '',
          name: 'arg2',
          nodeId: ''
        }
      ],
      outputParams: [
        {
          field: 'result',
          name: '返回结果',
          type: 'string'
        }
      ],
      height: 158,
      width: 332
    }
  },
  'http-node': {
    type: 'http',
    x: 1272,
    y: 263.5,
    properties: {
      text: 'HTTP 请求',
      options: {
        http: {
          url: '',
          method: 'GET',
          headers: {},
          requestBody: {
            type: 'json',
            body: ''
          },
          requestParams: {},
          timeout: 120
        }
      },
      inputParams: [],
      outputParams: [
        {
          field: 'body',
          name: '回复内容',
          type: 'string'
        },
        {
          field: 'statusCode',
          name: '状态码',
          type: 'number'
        }
      ]
    }
  },
  'dbquery-node': {
    type: 'dbquery',
    x: 1272,
    y: 263.5,
    properties: {
      text: '数据库查询',
      options: { 
        dbType: 'mysql',
        dbHost:'',
        dbPort: '',
        dbName: '',
        dbUserName: '',
        dbPassWord: ''
      },
      inputParams: [],
      outputParams: [
        {
          field: 'data',
          name: '查询结果',
          type: 'object[]'
        }
      ],
      remarks: '',
      height: 136,
      width: 332
    }
  }
};

const handleAddNode = nodeType => {
  const nodeData = data[nodeType];
  nodeData.id = generateUniqueId();
  console.log('handleAddNode', nodeData);
  emit('click-item', nodeData);
};
</script>
<style lang="less" scoped>
.node-list-popup {
  .node-list-popup-content {
    width: 302px;
    padding: 2px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 30px 5px #0000000d, 0 16px 24px 2px #0000000a, 0 8px 10px -5px #00000014;
  }
  .node-list {
    .node-type {
      height: 30px;
      padding-left: 16px;
      font-size: 12px;
      color: #8c8c8c;
      display: flex;
      align-items: center;
    }
    .node-flex-box {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
      .node-item {
        height: 100%;
        cursor: pointer;
        width: 50%;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 16px;
        &:hover {
          background: #e4e6eb;
          border-radius: 6px;
        }
        img {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
}
</style>